<template>
    <div class="help-page">
      <Header :title="title" :isWhite="false"></Header>
  
      <!-- 主要内容容器 -->
      <main class="content-container">
        <!-- 欢迎引导 -->
        <section class="guide-card">
          <h2 class="section-title">📌 使用指引</h2>
          <p class="tip-text">欢迎使用《江南岸》生态守护平台，以下指南助您快速成为环保卫士：</p>
        </section>
  
        <!-- 功能指南 -->
        <section class="guide-card">
          <h3 class="subtitle">🌳 核心功能指南</h3>
          <div class="step-list">
            <div class="step-item">
              <span class="step-number">1</span>
              <div>
                <h4>环境资讯查看</h4>
                <p>首页「热点」板块每日更新环保动态，支持关键词检索与分类筛选</p>
              </div>
            </div>
            <div class="step-item">
              <span class="step-number">2</span>
              <div>
                <h4>在线学习指导</h4>
                <p>「学堂」板块提供结构化课程，学习进度自动同步，支持证书下载</p>
              </div>
            </div>
            <div class="step-item">
              <span class="step-number">3</span>
              <div>
                <h4>环境问题申报</h4>
                <p>通过「举报」通道提交时，请确保开启定位并附清晰现场照片</p>
              </div>
            </div>
          </div>
        </section>
  
        <!-- 常见问题 -->
        <section class="faq-card">
          <h3 class="subtitle">❓ 常见问题解答</h3>
          <dl class="faq-list">
            <div class="faq-item">
              <dt>Q: 举报处理需要多长时间？</dt>
              <dd>A: 普通案件5个工作日内反馈，重大案件15日内办结</dd>
            </div>
            <div class="faq-item">
              <dt>Q: 学习记录如何保存？</dt>
              <dd>A: 课程播放自动存档，支持PDF笔记导出功能</dd>
            </div>
            <div class="faq-item">
              <dt>Q: 资讯内容更新频率？</dt>
              <dd>A: 每日早8点更新中央环保要闻，整点更新地方动态</dd>
            </div>
          </dl>
        </section>
  
        <!-- 联系通道 -->
        <section class="contact-card">
          <h3 class="subtitle">📮 联系我们</h3>
          <p>环保服务专线：<a href="tel:400-800-1234">400-800-1234</a></p>
          <p>电子邮箱：<a href="mailto:eco@jiangnan.cn">eco@jiangnan.cn</a></p>
          <p class="notice-text">服务时间：每日8:00-20:00（法定节假日正常服务）</p>
        </section>
      </main>
    </div>
  </template>
  
  <script setup>
  import Header from '@/components/Header.vue';
  const title = '帮助中心';
  </script>
  
  <style scoped>
  .help-page {
    padding: 20px;
    background: #f8fbf9;
  }
  
  .content-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .guide-card, .faq-card, .contact-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(46,125,50,0.1);
  }
  
  .section-title {
    color: #2e7d32;
    border-left: 4px solid #8dd6b3;
    padding-left: 12px;
    margin: 0 0 15px;
  }
  
  .subtitle {
    color: #3a6351;
    margin: 0 0 15px;
  }
  
  .step-list {
    display: grid;
    gap: 15px;
  }
  
  .step-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #f0fff6;
    border-radius: 8px;
  }
  
  .step-number {
    width: 28px;
    height: 28px;
    background: #2e7d32;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .faq-list {
    display: grid;
    gap: 12px;
  }
  
  .faq-item dt {
    color: #2e7d32;
    font-weight: 500;
    margin-bottom: 5px;
  }
  
  .faq-item dd {
    color: #666;
    margin-left: 1em;
  }
  
  .contact-card a {
    color: #2e7d32;
    text-decoration: underline;
  }
  
  .notice-text {
    color: #999;
    font-size: 0.9em;
    margin-top: 10px;
  }
  
  @media (max-width: 480px) {
    .help-page {
      padding: 15px;
    }
    
    .step-item {
      flex-direction: column;
      align-items: start;
    }
  }
  </style>